<!doctype html>
<html lang="en">

    <head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			ul,
			li {
				list-style: none;
				height: 40px;
				line-height: 40px;
				font-size: 16px;
			}
			
			li {
				border-bottom: 1px #f00 solid;
			}
			
			@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {
				/* 兼容iphone5 */
				body {
					background-color: red;
				}
			}
			/*A*/
			
			@media only screen and (max-device-width:480px) {
				body {
					background-color: #A52A2A;
				}
				p#aaaa {
					color: white;
					 
				}
			}
			/*B*/
			
			@media only screen and (min-device-width:481px) {
				body {
					background-color: #BBBBBB;
				}
				 
				p#bbbb {
					color: white;
				}
			}
			/*C*/
			
			@media (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
				body {
					background-color: #CF2D28;
				}
				
				p#cccc {
					color: white;
				}
			}
			/*6+*/
			
			@media (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
				body {
					background-color: gold;
				}
			}
			/*魅族*/
			
			@media only screen and (min-device-width:1080px) and (-webkit-min-device-pixel-ratio: 2.5) {
				body {
					background-color: darkseagreen;
				}
			}
			/*mate7*/
			
			@media only screen and (min-device-width:1080px) and (-webkit-min-device-pixel-ratio: 3) {
				body {
					background-color: brown;
				}
			}
			/*D-4,4s*/
			
			@media only screen and (device-height:480px) and (-webkit-device-pixel-ratio:2) {
				body {
					background-color: #DD524D;
				}
				p#dddd {
					color: white;
				}
			}
			/*E-320 640*/
			
			@media only screen and (device-height:360px) and (-webkit-device-pixel-ratio:2) {
				body {
					background-color: #EC971F;
				}
				p#eeee {
					color: white;
				}
			}
		</style>
	</head>

	<body style="font-size: 25px;">
		<p id="aaaa" >A</p>
		<p id="bbbb">B</p>
		<p id="cccc">C</p>
		<p id="dddd">D</p>
		<p id="eeee">E</p>
		<script>
			document.write("浏览器分辨率是" + document.documentElement.clientWidth + "*" + document.documentElement.clientHeight + "<br/>");
			document.write("屏幕分辨率是" + window.screen.width + "*" + window.screen.height + "<br/>");
			document.write("设备像素比：" + window.devicePixelRatio + "<br/>");
		</script>
	</body>

</html>